<%--
  Created by IntelliJ IDEA.
  User: gmj
  Date: 2022/3/18
  Time: 16:47
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        body{
            background-color: papayawhip;
        }
        #student{
            border: rosybrown solid;
            width: 900px;
            text-align: center;
            margin-left: 300px;
            margin-top: 100px;

        }
        tr,td{
            border: wheat solid;

        }

        #bt,#bt1,#bt2,#bt3,#bt4{
            height: 40px;
            width: 90px;
        }
        #oo{
            height: 40px;
            width: 65px;
        }
        #ss{
            margin-top: 100px;
            margin-left: 300px;
        }
        .pagination{
            margin-left: 300px;
        }
        #fff{
            margin-left: 300px;
        }

    </style>


    <script type="text/javascript">
        function searchId(){
            alert("确认查询？");
            var input, filter, table, tr, td, i;
            input = document.getElementById("sphone");
            filter=input.value;
            table = document.getElementById("student");
            tr = table.getElementsByTagName("tr");
            //alert(input.value);

            // 循环表格每一行，查找匹配项
            for (i = 0; i < tr.length; i++) {
                td = tr[i].getElementsByTagName("td")[0];
                if (td){
                    if (td.innerHTML===filter) {
                        tr[i].style.display = "";
                    } else {
                        tr[i].style.display = "none";

                    }
                }
            }

        }
        function searchtime(){
            alert("确认查询？");
            var input,table,tr,td,i,filter;
            input=document.getElementById("date");
            filter = input.value;
            table=document.getElementById("student");
            tr = table.getElementsByTagName("tr");
            for (i = 0; i < tr.length; i++) {
                td = tr[i].getElementsByTagName("td")[3];
                if (td) {
                    if (td.innerHTML==filter) {
                        tr[i].style.display = "";
                    } else {
                        tr[i].style.display = "none";

                    }
                }
            }

        }
        function searchp(){
            alert("确认查询？");
            var input,table,tr,td,i,filter;
            input=document.getElementById("attitude");
            filter = input.value;
            table=document.getElementById("student");
            tr = table.getElementsByTagName("tr");
            for (i = 0; i < tr.length; i++) {
                td = tr[i].getElementsByTagName("td")[4];
                if (td) {
                    if (td.innerHTML==filter) {
                        tr[i].style.display = "";
                    } else {
                        tr[i].style.display = "none";

                    }
                }
            }

        }

        function myFunction() {
            // 声明变量
            alert("确认查询？");
            var input, filter, table, tr, td, i;
            input = document.getElementById("sname");
            filter = input.value.toUpperCase();
            table = document.getElementById("student");
            tr = table.getElementsByTagName("tr");

            // 循环表格每一行，查找匹配项
            for (i = 0; i < tr.length; i++) {
                td = tr[i].getElementsByTagName("td")[1];
                if (td) {
                    if (td.innerHTML.toUpperCase().indexOf(filter) > -1) {
                        tr[i].style.display = "";
                    } else {
                        tr[i].style.display = "none";

                    }
                }
            }


        }



        function display(id){
            var target=document.getElementById(id);
            if(target.style.display=="none"){
                target.style.display="";
            }
            else
            {
                target.style.display="none";
            }
        };




        function dddd(){
            var db=document.getElementById("ddd");
            window.location.href="index.jsp";
        }



    </script>
</head>
<body>
<marquee bgcolor="#FFCC99" behavior="alternate"><font size ="10" color="#a52a2a">** Look and Search Here **</font></marquee>
<h2 align="center">学生信息展示查询界面</h2>
<h3 align="center">Display the student information</h3>
<div id="ss">
    <input type="text" id="sname" placeholder="输入姓名"><!--input-->
    <input type="text" id="sphone" placeholder="输入学号"><!--input-->
    <input type="text" id="date" placeholder="输入学期数">
    <input type="text" id="attitude" placeholder="输入在籍状态(A或L)">
    </select>
    <br><br>
    <input type="button" value="按姓名查询"  id="bt" onclick="myFunction()">
    <input type="button" value="按学号查询" id="bt2" onclick="searchId()">
    <input type="button" value="按学期数查询" id="bt3" onclick="searchtime()">
    <input type="button" value="按状态查询" id="bt4" onclick="searchp()">
    <input type="button" value="返回主页面" id="bt1" onclick="dddd()">

    <form action="/demo" method="get">'
        <p style="margin-left: 5px">Upload the books</p>
        <input placeholder="请输入本地上传的源路径" name="srcPath">
        <input placeholder="请数据hdfs路径" name="destPath">
        <input type="submit">
    </form>
<%--    <form action="/demo2" method="get" >--%>
<%--        <p style="margin-left: 5px" >Read the books  </p>--%>
<%--        <input placeholder="请输入hdfs读取路径" name="srcPath">--%>
<%--        <input type="submit">--%>
<%--    </form>--%>

<%--    <form action="/demo4" method="get" >--%>
<%--        <p style="margin-left: 5px" >Download the books  </p>--%>
<%--        <input placeholder="请输入数据的输入路径" name="srcPath">--%>
<%--        <input placeholder="请输入数据的输出路径" name="destPath">--%>
<%--        <input type="submit">--%>
    </form>
</div>
<table cellspacing=0 id="student">
    <tr>
        <th>学号</th>
        <th>姓名</th>
        <th>手机号</th>
        <th>学期数</th>
        <th>在籍状态</th>
    </tr>
    <tr>
        <td>20205355</td>
        <td>Tom3</td>
        <td>1501646899</td>
        <td>3</td>
        <td>L</td>
    </tr>
    <tr>
        <td>20028184</td>
        <td>Jack1</td>
        <td>1506382522</td>
        <td>3</td>
        <td>L</td>
    </tr>
    <tr>
        <td>20169099</td>
        <td>Jesson4</td>
        <td>1506344287</td>
        <td>2</td>
        <td>A</td>
    </tr>
    <tr>
        <td>20088353</td>
        <td>Jesson4</td>
        <td>1501972376</td>
        <td>1</td>
        <td>L</td>
    </tr>
    <tr>
        <td>19995842</td>
        <td>Tom3</td>
        <td>1495981365</td>
        <td>6</td>
        <td>L</td>
    </tr>
    <tr>
        <td>20042779</td>
        <td>Eva0</td>
        <td>1501069929</td>
        <td>1</td>
        <td>L</td>
    </tr>
    <tr>
        <td>20114802</td>
        <td>Marry2</td>
        <td>1510141914</td>
        <td>7</td>
        <td>A</td>
    </tr>
    <tr>
        <td>20147160</td>
        <td>Jack1</td>
        <td>1501955738</td>
        <td>4</td>
        <td>L</td>
    </tr>
    <tr>
        <td>20182663</td>
        <td>Jack1</td>
        <td>1503073207</td>
        <td>3</td>
        <td>L</td>
    </tr>
    <tr>
        <td>19988429</td>
        <td>Jack1</td>
        <td>1509543822</td>
        <td>3</td>
        <td>L</td>
    </tr>
    <tr>
        <td>20117851</td>
        <td>Jesson4</td>
        <td>1511684439</td>
        <td>2</td>
        <td>A</td>
    </tr>
    <tr>
        <td>200883530</td>
        <td>Jession4</td>
        <td>1501972376</td>
        <td>1</td>
        <td>L</td>
    </tr>
    <tr>
        <td>19995842</td>
        <td>Tom3</td>
        <td>1495981365</td>
        <td>6</td>
        <td>L</td>
    </tr>
    <tr>
        <td>20145024</td>
        <td>Marry2</td>
        <td>1492980598</td>
        <td>7</td>
        <td>L</td>
    </tr>
    <tr>
        <td>20198846</td>
        <td>Jesson4</td>
        <td>1504242810</td>
        <td>4</td>
        <td>A</td>
    </tr>
    <tr>
        <td>19966382</td>
        <td>Jack1</td>
        <td>1498724769</td>
        <td>2</td>
        <td>L</td>
    </tr>
    <tr>
        <td>20163827</td>
        <td>Jack1</td>
        <td>1503326754</td>
        <td>2</td>
        <td>A</td>
    </tr>
    <tr>
        <td>19993371</td>
        <td>Tom3</td>
        <td>1499825525</td>
        <td>2</td>
        <td>L</td>
    </tr>
    <tr>
        <td>20175057</td>
        <td>Jesson4</td>
        <td>1502586402</td>
        <td>6</td>
        <td>L</td>
    </tr>
    <tr>
        <td>19987763</td>
        <td>Marry2</td>
        <td>1500206112</td>
        <td>8</td>
        <td>A</td>
    </tr>


</table>
<div class="pagination" id="fff">
    <a href="#" class="prev"><</a>
    <a href="#" class="num active">首页</a>
    <a href="#" class="num active">下一页</a>
    <a href="#" class="num active">尾页</a>
    <a href="#" class="next">><</a>
</div>
</body>
</html>